<template>
  <div id="lineChart"></div>
</template>

<script>
import * as echarts from 'echarts';
import {getVisitByWeek} from "@/api";
export default {
  mounted() {
    getVisitByWeek().then( res => {
      this.initChart(res.data)

    })
  },
  methods: {
    initChart({date,adminPV,adminUV,webPV,webUV}) {
      let chartDom = document.getElementById('lineChart');
      let init = echarts.init(chartDom);
      let option = {
        title: {
          text: '一周访问统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '后台访问量(PV)',
            type: 'line',
            smooth: true,
            data: adminPV,
            color: '#FF005A',
            lineStyle: {
              color: '#FF005A',
              width: 2
            },
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                // {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          },
          {
            name: '后台独立用户(UV)',
            type: 'line',
            data: adminUV,
            color: '#3888fa',
            smooth: true,
            lineStyle: {
              color: '#3888fa',
              width: 2
            },
            // areaStyle: {
            //   color: '#3888fa'
            // },
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                // {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'},
              ]
            }
          },
          {
            name: 'web访问量(PV)',
            type: 'line',
            smooth: true,
            data: webPV,
            color: '#d87a7f',
            lineStyle: {
              color: '#d87a7f',
              width: 2
            },
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                // {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          },
          {
            name: 'web独立用户(UV)',
            type: 'line',
            data: webUV,
            color: '#2ec7c9',
            smooth: true,
            lineStyle: {
              color: '#2ec7c9',
              width: 2
            },
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                // {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'},
              ]
            }
          }
        ]
      }
      init.setOption(option);
    }
  }
}
</script>
